<template>
	<div id="page">
		<nav-bar></nav-bar>
		<div id="page-main" :class="scrollOn ? 'on': ''" ref="MainScroll"  @touchstart="S_start()" @touchend="S_end()">
			<div class="page" style="height: 100%;" ref="page1">
				<video height="100%" class="banner-video tran" 
				:class="swi_video?'on':'' "
				:src="videoUrl" 
				loop autoplay muted />
				
				<van-swipe :show-indicators="false" class="banner" autoplay="5000" @change="swiOn">
					<van-swipe-item class="item"  :class="bannerTab == 0 ? 'on': '' " >
						<div class="banner-info">
							<div class="tran t-1">{{$t('index.swi1')}}</div>
							<div class="tran t-2">{{$t('index.swi1_t')}}</div>
							<span class="xian"></span>
							<div class="tran yuan"></div>
							<div class="tran notes on">{{$t('index.swi1_in')}}</div>
						</div>
					</van-swipe-item>
					<van-swipe-item class="item"  :class="bannerTab == 1 ? 'on': '' " >
						
						<div class="banner-info">
							<div class="tran t-1">{{$t('index.swi2')}}</div>
							<div class="tran t-2">{{$t('index.swi2_t')}}</div>
							<span class="xian"></span>
							<div class="tran yuan"></div>
							<div class="tran notes on">{{$t('index.swi2_in')}}</div>
						</div>
					</van-swipe-item>
					<van-swipe-item class="item" :class="bannerTab == 2 ? 'on': '' " >
						<div class="banner-info">
							<div class="tran t-1">{{$t('index.swi3')}}</div>
							<div class="tran t-2">{{$t('index.swi3_t')}}</div>
							<span class="xian"></span>
							<div class="tran yuan"></div>
							<div class="tran notes on">{{$t('index.swi3_in')}}</div>
						</div>
						
					</van-swipe-item>
				</van-swipe>
										
				<div class="page-go btn-c-lan" @click="navTo('Trading')" >GET INTO</div>
			</div>
			
			<div class="page" style="background: #FFF;" ref="page2">
				<img class="page-bg" src="../assets/indx/index-bg-1.jpg" >
				<div class="info-block">
					<div class="title">PROJECT INTRODUCTION</div>
					<div class="info">
						&emsp; &emsp;Coinbtc is the world's largest digital currency asset management company.
						It takes you to make profits and guide blockchain investment 
						from the perspective of technology and finance. It integrates the top 
						ten mainstream exchanges in the world, aggregation depth, one platform, 
						global trading, inte  ligent price comparison, fast transaction, BTC intelligent 
						trading service, and provides over-the-counter trading, institutional lending 
						and custody services of digital assets for institutional funds, market makers 
						and other entities
						
					</div>
					
					<div class="info-foot">
						<div class="line"></div>
						<p>Authority</p>
						<p>Query enterpise information</p>
					</div>
					<div class="c-f-img">
						<img class="imgs" src="../assets/indx/FinCEN.png" >
						<img class="imgs" src="../assets/indx/NFA.png" >
						<img class="imgs" src="../assets/indx/icon-1.png" >
					</div>
				</div>
							
				
			</div>
			
			<div class="page" style="background: #20283d;" ref="page3">
				<div class="title">PRODUCT ADVANTAGES</div>
				
				<div class="card " :class="'card-'+ tabKa " >
					<div class="card-box c-t-1 tran">
						<img class="card-img" src="../assets/indx/certificate.png" >
						<div class="h">Efficient</div>
						<p class="p">
							Backbone high-speed networks such as high-performance cloud 
							servers, Japan, the United States and Singapore,
							24-hour operation without interruption.
						</p>
					</div>
					<div class="card-box c-t-2 tran">
						<img class="card-img" src="../assets/indx/transaction.png" >
						<div class="h">stable</div>
						<p class="p">
							Easy arbitrage introduces advanced mathematical models instead of 
							human subjective judgment to judge the prices of major exchanges 
							around the world from time to time
						</p>
					</div>
					<div class="card-box c-t-3 tran">
						<img class="card-img" src="../assets/indx/i-c.png" >
						<div class="h">intelligence</div>
						<p class="p">
							Gather the world's top ten mainstream exchanges to
							 gather deep and fast transaction BTC intelligent trading service platform
						</p>
					</div>
				</div>
				
				<div class="bottom-btn">
					<div class="btn2 btn-c-lan" @click="navTo('asset')" >Investment</div>
					<div class="btn">Start making money</div>
				</div>
				
			</div>
			<div class="page" ref="page4">
				<div class="title">COOPERATIVE PARTN</div>
				
				<div class="flx g-box">
					<div class="box">
						<div class="in" @click="navTo('certificates')">
							<img class="log" src="../assets/indx/i-c-1.png" >
							<span class="p">Platform qualification</span>
						</div>
					</div>
					<div class="box" >
						<div class="in">
							<img class="log" src="../assets/indx/i-c-2.png" >
							<span class="p">Blockchain partners</span>
						</div>
					</div>
					<div class="box">
						<div class="in"> <a href="https://businesssearch.sos.ca.gov/CBS/SearchResults?filing=&SearchType=CORP&SearchCriteria=Chssgy+Inc&SearchSubType=Keyword">
							<img class="log" src="../assets/indx/i-c-3.png" >
							<span class="p">Platform query</span>
						</a></div>
					</div>
				</div>
			</div>
			
			<div class="page" ref="page5">
				<img class="page-bg" src="../assets/indx/index-bg-2.jpg" >
			
				<div style="position: relative; z-index: 1;" >
					<div class="title">SUPPORT EXCHANGE</div>
					<div class="logo-box">
						<div class="box"> <a href="https://www.huobi.com/zh-cn/">
							<img class="icon" src="../assets/icon/icon1.png" >
							<p class="name">huobi</p>
						</a></div>
						<div class="box"> <a href="https://www.binance.com/en">
							<img class="icon" src="../assets/icon/icon2.png" >
							<p class="name">Binance</p>
						</a></div>
						<div class="box"> <a href="https://www.okx.com/">
							<img class="icon" src="../assets/icon/icon3.png" >
							<p class="name">OKX</p>
						</a></div>
						<div class="box"> <a href="https://www.coinbase.com/">
							<img class="icon" src="../assets/icon/icon4.png" >
							<p class="name">Coinbase</p>
						</a></div>
						<div class="box"> <a href="https://global.bittrex.com/">
							<img class="icon" src="../assets/icon/icon5.png" >
							<p class="name">Bittrex</p>
						</a></div>
						<div class="box"> <a href="https://www.bitfinex.com/">
							<img class="icon" src="../assets/icon/icon6.png" >
							<p class="name">Bitfinex</p>
						</a></div>
						<div class="box"> <a href="https://www.gemini.com/apac/hong-kong">
							<img class="icon" src="../assets/icon/icon7.png" >
							<p class="name">Gemini</p>
						</a></div>
						<div class="box"> <a href="https://www.kraken.com/">
							<img class="icon" src="../assets/icon/icon8.png" >
							<p class="name">kraken</p>
						</a></div>
						<div class="box"> <a href="https://bitflyer.com/ja-jp/">
							<img class="icon" src="../assets/icon/icon9.png" >
							<p class="name">Bitflyer</p>
						</a></div>
						<div class="box"> <a href="https://www.kucoin.com/">
							<img class="icon" src="../assets/icon/icon10.png" >
							<p class="name">Kucoin</p>
						</a></div>
					</div>
				</div>
			</div>
			
			<div class="page" style="background: #FFF;" ref="page6">
				<div class="footer">
					<img class="f-bg" src="../assets/indx/footer-bg.png" >
					<div class="f-box">
						<h3 class="h3">HashKey Hub</h3>
						<p class="p">Digital one-stop management platform</p>
						<p class="p">
							Hashkey group - its full name is Haskey digital asset group limited. 
							It is a financial technology company focusing on blockchain and digital assets
						</p>
					</div>
					<div class="hui">CONTACT US</div>
					<span class="hui">contact@hashkey.com</span>
					<div class="line"></div>
					<div class="btn">BACK</div>
					
				</div>
			</div>
		</div>

	</div>
</template>

<script>

	
	import navBar from "../components/navBar.vue"
	import {mapState} from "vuex";

	export default {
		name: "index2",
		components: {navBar},
		data() {
			return {
				scrollOn:false,
				pageTop:[],
				S_top:0,
				
				videoUrl:'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/earth.webm',
				swi_video:true,
				bannerTab: 0,
				tabKa: 1,
				invite_code:''
			}
		},
		computed: {

		},
		mounted() {
		},

		methods: {
			S_start(){ //触摸开始
				this.scrollOn = true;
				var page1 = this.$refs.page1.offsetHeight;
				var page2 = this.$refs.page2.offsetHeight;
				var page3 = this.$refs.page3.offsetHeight;
				var page4 = this.$refs.page4.offsetHeight;
				var page5 = this.$refs.page5.offsetHeight;
				var page6 = this.$refs.page6.offsetHeight;
				this.pageTop = [page1 ,page2 ,page3 ,page4 , page5 ,page6];
				
				console.log(pageTop)
				this.S_top = this.$refs.MainScroll.scrollTop;
			},
			S_end(){ //离开屏幕
				this.scrollOn = false; //停止滚动
				
				var top = this.$refs.MainScroll.scrollTop;		//滚动
				
				if(this.S_top < top){  //下
					this.S_xia()
				}else{ //上
					this.S_shang()
				}
			},
			S_xia(){ //向下
				var top = this.$refs.MainScroll.scrollTop;		//滚动
				var main_h = this.$refs.MainScroll.offsetHeight //屏幕高度
				var pageTop = this.pageTop; //所有页面高度
				
				var S_top = 0;
				pageTop.forEach((elem, index) => {
					S_top = S_top + elem;
					// console.log(top , S_top-elem , S_top-main_h)
					if(top > S_top-main_h &&  top <  S_top-main_h+50  ){
						// console.log( "hui第"+index+"页")
						this.M_Top(S_top-main_h)
					}else if(top > S_top-elem && top <  S_top-main_h){
						console.log("ziyou")
					}else if(top >  S_top-main_h && top < S_top  ){
						// console.log( "page第"+index+"页")
						this.M_Top(S_top)
					}
				})
			},
			S_shang(){ //向上
				var top = this.$refs.MainScroll.scrollTop;		//滚动
				var main_h = this.$refs.MainScroll.offsetHeight //屏幕高度
				var pageTop = this.pageTop; //所有页面高度
				var S_top = 0;
				pageTop.forEach((elem, index) => {
					S_top = S_top + elem;
					// console.log(top , S_top , S_top-main_h);
					if(top > S_top - 50 && top < S_top ){
						// console.log( "hui第"+index+"页")
						this.M_Top(S_top)
					}else if(top < S_top - 50 && top > S_top - elem - 50  ){
						// console.log( "page第"+index+"页")
						this.M_Top(S_top- elem)
					}
				})
			},
			M_Top(top){ //跳
				setTimeout(() =>{
					this.scrollOn = true;
					this.$refs.MainScroll.scrollTop = top ; 
				},300)
			},
			
			navTo:function(e){
				this.$router.push({name: e })
			},
			swiOn:function(e){
				var videoUrl = [
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/earth.webm',
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/machine.webm',
					'https://hk-y0059.oss-cn-hongkong.aliyuncs.com/woman.webm'
				];
				this.swi_video = false;
				setTimeout(()=>{
					this.videoUrl = videoUrl[e]
					this.swi_video = true;
				},500)
				
				this.bannerTab = e;
				var ka = this.tabKa +1;
				if(ka > 3){
					ka = ka-3
				}
				this.tabKa = ka
			}
			

		}
	}
</script>

<style lang="scss" scoped>
	.page{
		position: relative;
		min-height: 100%;
		
		// padding-bottom: 10px;
		// box-sizing: border-box;
	}
	
	#page-main {
		position: absolute; z-index: 10;
		top: 120px; left: 0px;
		height: calc(100% - 120px); width: 100%;
		background: #FFF;
		overflow: hidden;
		// overflow-y: scroll;
		// overflow-x:hidden ;
		
		transition: opacity 1s ease-in-out;
		-webkit-transition: opacity 1s ease-in-out;
		-ms-transition: opacity 1s ease-in-out;
		-o-transition: opacity 1s ease-in-out;
		
		
		&.on{
			// opacity: 0;
			overflow: scroll;
		}
	}

	.page {
		background: #242944;
		min-height: 100%;
		color: #333;
		position: relative; z-index: 1;
		overflow: hidden;
		background: -moz-linear-gradient(to top, #f8846d 0%, #5ef2ff 60%);
		
		display: flex;
		flex-direction: column;
	}
	.page-bg{
		position: absolute;
		z-index: 1;  width: 100%;  height: 100%;
	}
	
	.tran {
		-webkit-transition: all 1s;
		-moz-transition: all 1s;
		-o-transition: all 1s;
		transition: all 1s;
	}
	.banner{
		position: relative;
		width: 100%; height:100%;
		.item{
			overflow: hidden;
		}
		
		.banner-info {
			height: 45%;
			border-bottom: 1px solid #eee;
			position: relative;
	
			.t-1 {
				position: absolute;
				bottom: 160px;
				width: 100%;
				line-height: 150px;
				font-size: 80px;
				font-weight: 300;
				text-align: center;
				color: transparent;
			}
	
			.t-2 {
				position: absolute;
				line-height: 80px;
				padding-top:40px ;
				top: 120%;
				color: transparent;
				text-align: center;
				width: 100%;
				font-size: 60px;
			}
	
			.xian {
				height: 10px; 	background: #0fc1b7;
				width: 150px; position: absolute;
				bottom: -5px; left: 50%;
				margin-left: -75px;
			}
	
			.yuan {
				position: absolute;
				top: 100%; left: 50%;
				margin-top: 0px; margin-left: 0px;
				z-index: -1; opacity: .3;
				height: 0px; width: 0px;
				background: #0fc1b7;
				border-radius: 50%;
	
				-webkit-transition-delay: 1s;
				-moz-transition-delay: 1s;
				-o-transition-delay: 1s;
				transition-delay: 1s;
			}
	
			.notes {
				text-align: center;
				font-size: 28px;
				width: 70%;
				margin: 0 auto;
				position: absolute;
				left: 40%;
				top: 140%;
				color: transparent;
				-webkit-transition-delay: 1s;
				-moz-transition-delay: 1s;
				-o-transition-delay: 1s;
				transition-delay: 1s;
	
			}
		}
	
		.on {
			z-index: 9;
			
			.t-1 {bottom: 0px;color: #fff;}
			.t-2 {top: 100%; color: #fff; }
			.yuan { margin-top: -200px; margin-left: -200px; height: 400px; width: 400px; }
			.notes { color: #fff; left: 15%; }
			
		}
			
	}
	.banner-video {
		position: absolute; z-index: -1; 	opacity: 0;
		left: 40%; background: #242944;
		transform: translate(-50%,0%);
		
		&.on{opacity: 1; left: 50%;}
	}
	.page-go{
		position: absolute; text-align: center;
		bottom: 100px; left: 50%;
		z-index: 999; margin-left: -150px;
		width: 300px; border-radius: 100px;
		height: 100px; line-height: 100px;
		font-size: 40px; color:#333; 
	}
	
	.info-block{
		margin: 30px; border-radius: 10px; text-align: center;
		position: relative; z-index: 9; background: #FFF; padding:1px;
		
		.info{
			padding: 5px 30px; color:#aaa; line-height: 40px; text-align: left; font-size: 30px; font-weight: 300;
		}
		.info-foot{
			.line{height: 80px; width: 49%; border-right: 5px dotted #999; }
			color: #666; line-height: 50px; font-size: 35px;
		}
		.c-f-img{
			display: flex ; justify-content: center;
			.imgs{width: 200px; height:200px; margin: 20px;}
		}
	}
	
	.title{color: #458ae2; font-size: 40px; line-height: 80px; margin-top: 50px; text-align: center;}
	
	.card{
		text-align: center;
		position: relative; width: 100%; height: 600px; z-index: 99; margin-top: 50px;
		.card-box{
			position: absolute;
			left: 20%;top: 0px;
			text-align: center; padding: 50px 0; box-sizing: border-box;
			width: 50%;height: 100%;
			border: 1px solid #bbb;
			border-radius: 20px;
			background: #fff;
			box-shadow: 0 0 10px 1px #eee;
			
			.card-img {
			    height: 150px;  display: inline-block;
			}
			.h{
			    font-size: 40px;
			    color: #000;
			}
			.p{
			    display: block; line-height: 45px; text-align: left;
			    color: #999;   padding: 0px 20px; padding-top: 20px;
				font-size: 28px;
			}
		}
		&.card-1{
			.c-t-1{z-index: 1; left: 25%;}
			.c-t-2{z-index: -1; left: 50%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
			.c-t-3{z-index: -1; left: 0%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
		}
		&.card-2{
			.c-t-1{
				z-index: -1; left: 0%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
			.c-t-2{z-index: 1; left: 25%;}
			.c-t-3{z-index: -1; left: 50%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
		}
		&.card-3{
			.c-t-1{z-index: -1; left: 50%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
			.c-t-2{z-index: -1; left: 0%;
				-webkit-transform: scale(.8);
				-moz-transform: scale(.8);
				-o-transform: scale(.8);
				transform: scale(.8);
			}
			.c-t-3{z-index: 1; left: 25%;}
		}
	}
	.bottom-btn{
		text-align: center; padding-top: 80px;
		.btn{
			display: inline-block;
			width: 300px; height:80px; line-height:80px;  background: #FFF; margin:0px 20px;
			font-size: 30px; border-radius: 70px; color:#256dff
		}
		.btn2{
			display: inline-block;
			width: 300px; height:80px; line-height:80px;
			color: #FFF; border-radius: 70px; 
		}
	}
	
	.g-box{
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 30px;
		box-sizing: border-box;
		
		.box{
			flex: 1;
			width: 80%;
			margin: 30px auto;
			background: #fff; border-radius: 10px;
			border: 1px solid #bbb; 
			padding: 30px;box-sizing: border-box;
			display: flex; align-items: center;
			
			.in{
				width: 100%; 
				text-align: center;
				.log{height: 100px;}
				.p{color: #333333; display: block; margin: 0px; font-size: 28px; }
			}
			
		}
	}
	
	.logo-box{
		overflow: hidden; padding: 20px;
		
		.box{
			width: 25%; float: left;
			padding: 30px 20px;
			box-sizing: border-box;
			color: #fff;
			text-align: center;
			
			.icon{width: 100%;}
			.name{color: #FFF;}
			
		}
		
	}
	.footer{
		flex: 1;
		position: relative; height:100%; z-index: 9; 
		overflow: hidden; text-align: center;
		.f-bg{width: 100%; position: absolute; left:0px; top:0px; z-index: -1;}
		.f-box{
			background: rgba(37, 109, 255, 0.80);
			padding:50px 30px;margin: 50px 80px; color:#FFF;
			margin-top: 150px; color:#eee;
			.h3{font-size: 50px; font-weight: 300; margin: 0px; }
			.p{margin-top: 30px; line-height: 50px; text-align: left; }
		}
		.hui{
			color: #999;
			margin: 20px 0px;
		}
		
		.line{
			display: block;
			width: 49%;
			// background: #f00;
			height: 120px;
			margin: 30px 0px;
			border-right:4px dotted #bbb;
		}
		
		
		.btn{
			background: #256dff; color:#FFF; height:80px; line-height:80px;
			font-size: 35px; display: inline-block;
			padding: 0px 50px; border-radius: 70px;
		}
		
		.weib{
			position: absolute;bottom: 0px; left:0px; width: 100%;
			background: #256dff; color:#FFF; line-height: 80px;
		}
	}
	
	
	
	
</style>
